
import type { placeholderSign } from 'element-plus/es/components/table-v2/src/private';
<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">新增</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="標題" required>
                  <el-input v-model="formLabelAlign.title" style="width: 380px;" placeholder="請輸入標題" />
                </el-form-item>
                <el-form-item label="消息内容" required style="align-items:flex-start ;">
                  <el-input v-model="formLabelAlign.concent" placeholder="請輸入消息内容" type="textarea" style="min-height: 180px;" />
                </el-form-item>
                <el-form-item label="指定人員查看" @click="choosePerson()">
                  <el-input :model-value="formLabelAlign.person" placeholder="請選擇" style="width: 380px" :suffix-icon="ArrowRight"></el-input>
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>

        </el-col>


      </el-row>

    </div>
    <el-dialog v-model="dialogVisible" title="選擇指定人員" @close="closeDialog">
      <div class="choosebox ">
        <div class="border " style="display:flex;">
          <div class="left">
            <el-input v-model="keyword" style="width: 100%;border-radius:15px;" @change="searchDialog()" placeholder="請輸入ID搜尋" :prefix-icon="Search" />
            <div class="listbox">
              <div v-for="(item, index) in formLabelAlign.list" :key="index" class="align-center mt15">
                <el-checkbox v-model="item.checked" label="" size="large" @click="choose(item, index)" />
                <img :src="item.avatar" class="avatar" />
                <div class="ml10 clr3a3">
                  <div>{{ item.name }}</div>
                  <div>ID:{{ item.id }}</div>
                </div>

              </div>

            </div>
          </div>
          <div class="right clr3a3">
            <div>已選</div>
            <div class="listbox">
              <div v-for="(item, index) in formLabelAlign.list2" :key="index" class="justify-between mt15">
                <div class="align-center">
                  <img :src="item.avatar" class="avatar" />
                  <div class="ml10 clr3a3">
                    <div>{{ item.name }}</div>
                    <div>ID:{{ item.id }}</div>
                  </div>
                </div>

                <el-icon @click="delItem(item, index)">
                  <CircleCloseFilled />
                </el-icon>

              </div>
            </div>

          </div>
        </div>
        <div class="mt40 mb15 flex-cen ">
          <div class="align-center">
            <el-button class="btn1" @click="resetDialog()">重置</el-button>
            <el-button class="btn2" @click="submitDialog()">提交</el-button>
          </div>

        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ArrowRight, Search } from '@element-plus/icons-vue'
import type { FormProps } from 'element-plus'
import { noticeAdd } from '@/api/system.js'
import { userList } from '@/api/usersManage'

onMounted(() => {
  getUserList()
})
// 获取用户列表
const getUserList = () => {
  userList({
    page: 1,
    per_page: 10000000,
    // name: keyword.value,
    id: keyword.value,

  }).then((res) => {
    console.log('用户列表', res)
    formLabelAlign.list = res.data.data

    formLabelAlign.list.forEach((item) => {
      item.checked = false
    })
    if (formLabelAlign.list2.length) {
      formLabelAlign.list.forEach((item) => {
        formLabelAlign.list2.forEach((ite) => {
          if (ite.id == item.id) {
            item.checked = true
          }
        })
      })
    }

    console.log('全部列表,', formLabelAlign.list)

    console.log('已选择列表,', formLabelAlign.list2)

  })
}
const searchDialog = () => {
  getUserList()
  // formLabelAlign.list2 = []
}
// 关闭弹窗
const closeDialog = () => {
  formLabelAlign.list2 = []
}

const labelPosition = ref<FormProps['labelPosition']>('right')
const dialogVisible = ref(false)
const choosePerson = () => {
  getUserList()
  dialogVisible.value = true
}
const keyword = ref('')
const formLabelAlign = reactive({
  title: '',
  concent: '',
  person: '',
  list: [],
  list2: []
})
const choose = (item, index) => {
  if (!item.checked) {
    let obj = formLabelAlign.list.find((ite, ind) => index == ind)
    formLabelAlign.list2.push(obj)
  } else {
    let spliceIndex = formLabelAlign.list2.findIndex((ite, ind) => index == ind)
    formLabelAlign.list2.splice(spliceIndex, 1)
  }
}
const delItem = (item, index) => {
  let listIndex = formLabelAlign.list.findIndex(ite => item.id == ite.id)
  formLabelAlign.list[listIndex].checked = false
  console.log()
  formLabelAlign.list2.splice(index, 1)
}
const submit = () => {
  noticeAdd({
    title: formLabelAlign.title,
    concent: formLabelAlign.concent
  }).then(() => {
    back()
  })
}
const reset = () => {
  formLabelAlign.title = ''
  formLabelAlign.concent = ''
}
// 弹窗提交
const submitDialog = () => {
  let arr = formLabelAlign.list2.map((item) => { return item.id })
  noticeAdd({
    title: formLabelAlign.title,
    concent: formLabelAlign.concent,
    uid: arr.join(',')
  }).then(() => {
    back()
  })
}
// 弹窗重置
const resetDialog = () => {
  keyword.value = ''
  formLabelAlign.list2 = []
  getUserList()
}
const router = useRouter()
const back = () => {
  dialogVisible.value = false
  setTimeout(() => {
    router.back()

  }, 1000);
}
</script>
<style lang="scss">
.choosebox {
  width: 70%;
  margin: 50px auto;


  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .border {
    height: 500px;
    border: 1px solid #d9e1ec;
    border-radius: 15px;

    .left {
      padding: 10px;
      border-right: 1px solid #d9e1ec;
      width: 50%;

      .listbox {
        height: 430px;
        overflow-y: scroll;
      }

    }

    .right {
      padding: 10px;
      width: 50%;

      .listbox {
        height: 460px;
        overflow-y: scroll;
      }
    }
  }
}
</style>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  min-height: 180px !important;
}

/* :deep(.el-input.is-disabled .el-input__wrapper) {
  background: #ffffff;
  box-shadow: none;
} */
</style>